<!--
 * @Author: Mcc
 * @Date: 2024-07-30 16:13:56
 * @LastEditors: 王明明834578987 10266004+wang-mingming-834578987@user.noreply.gitee.com
 * @LastEditTime: 2024-10-09 09:51:02
 * @FilePath: \ft-apply-admin\src\views\ApplicationList\ApplicationList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by Mcc, All Rights Reserved. 
-->
<template>
  <div class="recuit-flag">
    <div class="flex justify-between mb-16px">
      <div>
        <span class="font-size-20px font-bold mr-16px">招聘目标</span>
      </div>
      <a-range-picker @change="onChange" valueFormat="YYYY-MM-DD"/>
    </div>
    <!-- 招聘总数/招聘目标-大区 -->
    <div class="mb-16px h-340px flex-bettween">
      <div class="w-32% lf-bg mr-20px"></div>
      <div class="flex-1 theme-bg"></div>
    </div>
    <!-- 各分校教师情况 -->
    <div class="block-div h-415px mb-16px">
      <div class="flex justify-between mb-18px">
        <div class="font-bold font-size-18px icon-trapezoid">各分校教师情况</div>
        <TabSwitch v-model="teacher" :list="regionList" @change="changeTeacher" />
      </div>
      <BasicTable @register="teacherTable">
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'd'">
            <div class="flex items-center">
              <div class="bar-div flex" >
                <div 
                    class="progress-span"
                    :style="{'background-color': colors[index > 3 ? index - 4 : index ], width: record.d +'%'}"></div>
              </div>
              <span class="w-40px inline-block text-right">{{ record.d }}%</span>
            </div>
          </template>
        </template>
      </BasicTable>
    </div>
    <!-- 各年级招聘需求 -->
    <div class="block-div h-568px">
      <div class="flex justify-between mb-18px">
        <div class="font-bold font-size-18px icon-trapezoid">各年级招聘需求</div>
        <TabSwitch v-model="recruit" :list="regionList" @change="recruitTeacher" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref , computed } from 'vue'
import TabSwitch from '@/views/DataCenter/DataReport/components/TabSwitch.vue'
import { BasicTable, useTable } from '@/components/Table'
import { teaColumns } from './components/data'

// 改变时间
const time = ref<[]>([])
function onChange(val:[]){
  time.value = val
}

// 各分校教师情况
const regionList = ['安徽','芜湖','安庆','马鞍山','新加坡']
const teacher = ref(1)

// 教师tab切换
function changeTeacher(val:number){
  teacher.value = val
}

// 各分校教师情况 表格数据
const tableDataTea= ref([
  {
    a: '合肥',
    b: 1,
    c: 2,
    d: 13,
    e: 4,
    f: 5,
    g: 6,
    h: 7,
    j: 8,
    k: 9,
    l: 10,
    x: 11,
    q: 12,
  },
  {
    a: '芜湖',
    b: 11,
    c: 22,
    d: 33,
    e: 44,
    f: 55,
    g: 66,
    h: 77,
    j: 88,
    k: 98,
    l: 100,
    x: 111,
    q: 121,
  },
  {
    a: '安庆',
    b: 111,
    c: 221,
    d: 33,
    e: 443,
    f: 525,
    g: 636,
    h: 771,
    j: 883,
    k: 198,
    l: 1020,
    x: 1111,
    q: 12211,
  },
  {
    a: '马鞍山',
    b: 1111,
    c: 22121,
    d: 33,
    e: 43143,
    f: 525,
    g: 6361,
    h: 77131,
    j: 883,
    k: 198,
    l: 10220,
    x: 11111,
    q: 122211,
  },
  {
    a: '新加坡',
    b: 11111,
    c: 2212311,
    d: 100,
    e: 43131243,
    f: 532125,
    g: 636311,
    h: 77321131,
    j: 88313,
    k: 19823,
    l: 1023120,
    x: 11111111,
    q: 1222112311,
  },
])
const [teacherTable] = useTable({
  dataSource: tableDataTea,
  //api: getMathList,
  columns: teaColumns,
  formConfig: {
    labelWidth: 120,
    autoAdvancedLine: 4,
  },
  showIndexColumn: false,
  bordered: true,
  canResize: false,
  pagination: false
})

// 各年级招聘需求
const colors = ['#16C716','#209EE4','#F0A03D','#FF4242']
const recruit = ref(1)
// 各年级招聘需求tab切换
function recruitTeacher(val:number){
  recruit.value = val
}
</script>

<style scoped lang="less">
.recuit-flag{
  .lf-bg{
    height: 100%;
    background: url('../../assets//images/mask.png') no-repeat center;
    background-size: cover;
    border-radius: 10px;
  }
  .flex-bettween{
    display: flex;
    justify-content: space-between;
  }
  .theme-bg{
    background-color: var(--component-background);
    border-radius: 10px;
  }
  .block-div{
    background-color: var(--component-background);
    border-radius: 10px;
    padding: 24px 20px;
  }
  .bar-div{
    width: 75px;
    height: 10px;
    margin-right: 5px;
    background-color: #E9EDEF;
    border-radius: 10px 10px 10px 10px;
    .progress-span{
      display: inline-block;
      border-radius: 10px 10px 10px 10px;
      height: 100%;
    }
  }
  .icon-trapezoid::before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 0;
    vertical-align: middle;
    border-bottom: 4px solid #209EE4;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    overflow: hidden;
    transform: rotate(90deg);
    margin-top: -1px;
  }
}
</style>